<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html lang="zh">
<head>
<%@include file="/WEB-INF/jsp/common/header.jsp"%>
<style type="text/css">
.addForm {
	width: 100px;
}

a {
	cursor: pointer;
}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		$("#save").click(function() {
			var id = $(".modal-body input[name=id]").val();
			var icon = $(".modal-body input[name=icon]").val();
			var name = $(".modal-body input[name=name]").val();
			var url = $(".modal-body input[name=url]").val();
			var level = $(".modal-body select[name=level]").val();
			var parent_id = $(".modal-body select[name=parent_id]").val();
			var priority = $(".modal-body input[name=priority]").val();
			var content = $(".modal-body textarea[name=content]").val();
			if (name == "") {
				$.messager.alert("菜单名不能为空");
				return false;
			}
			var reg = /^[0-9]*$/;
			if (priority != "" && !reg.test(priority)) {
				$.messager.alert("排序值只能为数字");
				return false;
			}
			$(this).attr("disabled","disabled");
			$.ajax({
				type : "POST",
				url : "edit",
				data : "t=" + Math.round(999 * Math.random()) + "&icon=" + icon + "&name=" + name + "&url=" + url + "&level=" + level + "&parent_id=" + parent_id + "&priority=" + priority + "&content=" + content + "&id=" + id,
				success : function(result) {
					if (result.code == 0) {
						$(this).removeAttr("disabled");
						alert("保存成功");
						location.reload();
					} else {
						alert(result.msg);
					}
				}
			});
		});
		$("#add").click(function() {
			$(".modal-body input").val("");
			$(".modal-body textarea").val("");
			$("#editModal").modal('show');
		});
		$("#closeModal").click(function() {
			$("#editModal").modal('hide');
		});
		$(".edit").click(function() {
			var menuId = $(this).attr("menuId");
			$.ajax({
				type : "POST",
				url : "info?menuId=" + menuId,
				data : "t=" + Math.round(999 * Math.random()),
				success : function(result) {
					if (result.code == 0) {
						$(".modal-body input[name=id]").val(result.content.id);
						$(".modal-body input[name=icon]").val(result.content.icon);
						$(".modal-body input[name=name]").val(result.content.name);
						$(".modal-body input[name=url]").val(result.content.url);
						$(".modal-body select[name=level]").val(result.content.level);
						$(".modal-body select[name=parent_id]").val(result.content.parent_id);
						$(".modal-body input[name=priority]").val(result.content.priority);
						$(".modal-body textarea[name=content]").val(result.content.content);
						$("#editModal").modal('show');
					} else {
						alert(result.msg);
					}
				}
			});
		});
		$(".revoke").click(function() {
			var menuId = $(this).attr("menuId");
			var parentId = $(this).attr("parentId");
			var tip = "确定删除菜单？";
			if (parentId == 0) {
				tip = tip + "(注:删除一级菜单其子菜单也会全部删除)";
			}
			if (confirm(tip)) {
				$.ajax({
					type : "POST",
					url : "revoke?menuId=" + menuId,
					data : "t=" + Math.round(999 * Math.random()),
					success : function(result) {
						if (result.code == 0) {
							location.reload();
						} else {
							alert(result.msg);
						}
					}
				});
			}
		});
	});
</script>
</head>
<body>
	<div class="container-fluid">
		<div class="sub-header">
			<h2>菜单列表</h2>
		</div>
		<br>
		<button id="add" type="button" class="btn btn-info">新增菜单</button>
		<br><br>
		<div class="table-responsive">
			<table class="table-hover table table-bordered">
				<tr>
					<th>图标</th>
					<th>菜单ID</th>
					<th>菜单名称</th>
					<th>父菜单ID</th>
					<th>菜单链接</th>
					<th>菜单等级</th>
					<th>排序值</th>
					<th>菜单描述</th>
					<th>操作</th>
				</tr>
				<c:forEach var="data" items="${page.data}">
					<tr <c:if test="${data.parent_id==0}">style="background:#e5e5e5;"</c:if>>
						<td><font class="${data.icon}" color="#31708f"></font></td>
						<td>${data.id}</td>
						<td> <a class="edit" menuId="${data.id}">${data.name}</a></td>
						<td>${data.parent_id}</td>
						<td>${data.url}</td>
						<td>${data.level}</td>
						<td>${data.priority}</td>
						<td>${data.content}</td>
						<td>
							<a class="edit" menuId="${data.id}" parentId="${data.parent_id}">编辑</a>&nbsp;&nbsp; 
							<a class="revoke" menuId="${data.id}" parentId="${data.parent_id}">删除</a>
						</td>
					</tr>
				</c:forEach>
			</table>
		</div>
		<my:pagination pageData="${page}" url="/menu/list" urlParam="${urlParam}" />
	</div>

	<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-lg" style="width: 480px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">编辑菜单</h4>
				</div>
				<div class="modal-body">
					<input type="hidden" name="id">
					<table id="editTable" class="table-hover table table-bordered">
						<tr>
							<td>
								<div class="input-group">
									<span class="input-group-addon addForm">图标CLASS</span> 
									<input type="text" class="form-control" name="icon" placeholder="图标CLASS" style="width: 320px;">
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="input-group">
									<span class="input-group-addon addForm">菜单名称</span> 
									<input type="text" class="form-control" name="name" placeholder="菜单名称" style="width: 320px;">
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="input-group">
									<span class="input-group-addon addForm">父菜单</span> 
									<select name="parent_id" class="form-control" style="width: 320px;">
										<option value="0">无</option>
										<c:forEach var="menu" items="${parentMenuList}">
											<option value="${menu.id}">${menu.name}</option>
										</c:forEach>
									</select>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="input-group">
									<span class="input-group-addon addForm">菜单链接</span> 
									<input type="text" class="form-control" name="url" placeholder="菜单链接" style="width: 320px;">
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="input-group">
									<span class="input-group-addon addForm">菜单等级</span> 
									<select name="level" class="form-control" style="width: 320px;">
										<option value="1">一级</option>
										<option value="2">二级</option>
										<option value="3">三级</option>
									</select>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="input-group">
									<span class="input-group-addon addForm">排序值</span> 
									<input type="text" class="form-control" name="priority" placeholder="排序值" style="width: 320px;">
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="input-group">
									<span class="input-group-addon addForm">描述</span> 
									<textarea name="content" class="form-control" placeholder="描述" style="width: 320px;"></textarea>
								</div>
							</td>
						</tr>
						<tr>
							<td align="center">
								<button id="save" type="button" class="btn btn-success addForm">保 存</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<button id="closeModal" type="button" class="btn btn-danger addForm">关闭</button>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>

</body>